<template>
  <div :style="{ height: isNav ? '90px' : '50px' }">
    <div class="topNav">
      <div class="logo">
        <div class="left">
          <router-link to="/"><img src="../assets/logo.png" /></router-link>
          <span>打开APP下载音乐</span>
        </div>
        <div class="right">下载APP</div>
      </div>
      <ul class="nav" v-if="isNav">
        <li v-for="item in navList" :key="item.url">
          <router-link :to="item.url">{{ item.title }}</router-link>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      navList: [
        { url: "/recommend", title: "推荐音乐" },
        { url: "/hot", title: "热歌榜" },
        { url: "/search", title: "搜索" },
      ],
    };
  },
  computed: {
    isNav() {
      return this.navList.some((a) => a.url == this.$route.fullPath);
    },
  },
};
</script>

<style lang="less" scoped>
.topNav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 999;
  .logo {
    height: 50px;
    padding: 0 10px;
    background: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .left {
      display: flex;
      align-items: center;
      img {
        width: 100px;
        margin: 0 10px;
      }
      span {
        font-size: 10px;
        color: #cecece;
      }
    }
    .right {
      width: 80px;
      height: 30px;
      line-height: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 2px solid rgba(93, 202, 168, 0.1);
      box-sizing: border-box;
      background: rgba(93, 202, 168, 0.5);
      text-align: center;
      border-radius: 20px;
      font-size: 12px;
      font-weight: bold;
      color: #fff;
    }
  }
  .nav {
    display: flex;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    background: #feffff;
  }
  li {
    flex: 1;
    height: 40px;
    text-align: center;
    a {
      display: inline-block;
      height: 40px;
      line-height: 40px;
      padding: 0 5px;
      font-size: 15px;
      color: #333;
      &.router-link-exact-active {
        color: #5dcaa8;
        box-sizing: border-box;
        border-bottom: 2px solid #5dcaa8;
      }
    }
  }
}
</style>